<template>
	<view class="main" :style="positionStyles" @click.stop="handleSound">
		<view class="sound" :style="{ backgroundColor }" @click.stop="handleSound">
			<image v-if="isSound === 1" src="/static/sound.png" mode="aspectFill" class="sound-icon" alt="声音"></image>
			<image v-if="isSound === 0" src="/static/nosound.png" mode="aspectFill" class="sound-icon" alt="静音"></image>
			<image v-if="isSound === 2" src="/static/vibration.png" mode="aspectFill" class="sound-icon" alt="振动"></image>
		</view>
	</view>
</template>

<script>
const linli = uniCloud.importObject('linliChat',{ customUI:true});
export default {
	name: 'SoundControl', // 规范组件名称（ PascalCase 风格）
	props: {
		top: {
			type: String,
			default: ''
		},
		left: {
			type: String,
			default: ''
		},
		right: {
			type: String,
			default: ''
		},
		bottom: {
			type: String,
			default: ''
		},
		backgroundColor: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			sound: 0
		};
	},

	computed: {
		isSound() {
	
			return this.$store.state.msg.stateConfig?.isSound ?? 1; // 增加默认值，避免 undefined
		},
	  positionStyles() {
	    const styles = {
	      position: 'fixed',
	      zIndex: 9999, // 明确z-index，避免被遮挡
	      // 补充默认值，确保所有方向都有定位基准
	      top: this.top || '20rpx',
	      left: this.left || 'auto',
	      right: this.right || '20rpx', // 默认为右侧20rpx
	      bottom: this.bottom || 'auto'
	    };
	    // 移除空值（若有）
	    Object.keys(styles).forEach(key => {
	      if (styles[key] === 'auto' && key !== 'position' && key !== 'zIndex') {
	        delete styles[key];
	      }
	    });
	    return styles;
	  }
	
	},
	methods: {
		handleSound() {
			this.sound = (this.isSound + 1) % 3;
			// 优化：使用解构赋值简化代码

			this.$store.commit('msg/SET_stateConfig', {
				...this.$store.state.msg.stateConfig,
				isSound: this.sound
			});

			// 增加操作反馈
			this.saveConfig();
			uni.vibrateShort(); // 短震动反馈
		},
		async saveConfig() {
			
			try {
				const res = await linli.saveConfig(this.$store.state.msg.user.userId, {  ...this.$store.state.msg.saveConfig });
				if (res) {
					if (this.sound === 0) {
						uni.showToast({
							title:'静音模式',
							position:'center'
						})
					}
					if(this.sound===1){
						uni.showToast({
							title:'声音开启',
							position:'center'
						})
					}
					if(this.sound===2){
						uni.showToast({
							title:'振动模式',
							position:'center'
						})
					}
				}
			} catch (e) {
				uni.showToast({
					icon: 'error',
					title: '失败，稍后重试'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	z-index: 9999;
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;

}

.sound {
	display: flex;
	background-color: aqua;
	height: 60rpx;
	width: 60rpx;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
    cursor: pointer;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); // 增加轻微阴影，提升质感
	transition: transform 0.2s ease; // 点击动画过渡

	&:active {
		transform: scale(0.95);
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); // 点击时加深背景
	}
}

.sound-icon {
	width: 50rpx; // 优化尺寸：原 50rpx 接近容器大小，缩小后更协调
	height: 50rpx;
	object-fit: contain; // 确保图标完整显示（兼容不同尺寸图片）
}
</style>
